<template>
    <div>
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="查询" name="queryBar">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <!-- FORM查询，工作包编码，架次，配送状态，分拣状态(待分拣，已分拣),周计划时间，日计划时间，月计划时间 -->
                            <el-form :inline="true" label-width="120" :model="formInline"  class="demo-form-inline">
                                <el-form-item label="批次">
                                    <el-input class="input-width" v-model="formInline.batchNo" size="mini" placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="架次">
                                    <el-input class="input-width" v-model="formInline.startPlaneNo" size="mini" placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="AO编号">
                                    <el-input class="input-width" v-model="formInline.aoCode" size="mini" placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="工作包编码">
                                    <el-input class="input-width" v-model="formInline.packageCode" size="mini" placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="图号">
                                    <el-input class="input-width" v-model="formInline.itemCode" size="mini" placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="配套状态">
                                    <el-input class="input-width" v-model="formInline.state" size="mini" placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="交接状态：">
                                    <el-select class="input-width" v-model="formInline.deliveryState" size="mini">
                                        <el-option
                                            v-for="item in sortDic"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="日计划时间">
                                    <el-date-picker style="width:140px" value-format="yyyy-MM-dd" v-model="formInline.dailyStartTime" size="mini" type="date" placeholder="开始日期"></el-date-picker>到
                                    <el-date-picker style="width:140px" value-format="yyyy-MM-dd" v-model="formInline.dailyEndTime" size="mini" type="date" placeholder="结束日期"></el-date-picker>
                                </el-form-item>
                                <el-form-item label="周计划时间">
                                    <el-date-picker style="width:140px" value-format="yyyy-MM-dd" v-model="formInline.weekStartTime" size="mini" type="date" placeholder="开始日期"></el-date-picker>到
                                    <el-date-picker style="width:140px" value-format="yyyy-MM-dd" v-model="formInline.weekEndTime" size="mini" type="date" placeholder="结束日期"></el-date-picker>
                                </el-form-item>
                                <el-form-item label="月计划时间">
                                    <el-date-picker style="width:140px" value-format="yyyy-MM-dd" v-model="formInline.monthStartTime" size="mini" type="date" placeholder="开始日期"></el-date-picker>到
                                    <el-date-picker style="width:140px" value-format="yyyy-MM-dd" v-model="formInline.monthEndTime" size="mini" type="date" placeholder="结束日期"></el-date-picker>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" size="mini" @click="doQuery">查询</el-button>
                                    <el-button type="primary" size="mini" @click="doReset">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
            </el-collapse-item>
            <el-collapse-item title="分拣台列表 / 工作包列表" name="sortWorkpackageList">
                <el-row>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <!-- 分拣台列表：分拣台名称，分拣编号，ip -->
                            <el-table
                            ref="sortingListTable"
                            size="mini"
                            :data="sortingListTableData"
                            style="width: 100%"
                            @selection-change="handleSelectionChangeForSortingList"
                            height="250"
                            highlight-current-row
                            @current-change="tableCurrentChangeForSortingList"
                            >
                                <el-table-column type="selection" width="40"> </el-table-column>
                                <el-table-column type="index" label="序号" width="50"> </el-table-column>
                                <el-table-column prop="consoleId" label="主键" v-if="false" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="consoleName" label="分拣台名称" width="120" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="consoleStatus" label="分拣状态" width="70" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="consoleIp" label="分拣台IP" width="120" :show-overflow-tooltip="true"> </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                    <el-col :span="18" style="padding-left: 10px;">
                        <div class="grid-content bg-purple">
                            <!-- 工作包列表:工作包编号，工作包名称，机型，批次，架次，配套状态，分拣状态，周计划时间，日计划时间，缺件类型 -->
                            <el-table
                            ref="workPackageTable"
                            size="mini"
                            :data="workPackageTableData"
                            style="width: 100%"
                            height="250"
                            highlight-current-row
                            @current-change="tableCurrentChangeForWorkPackageList"
                            >
                                <el-table-column type="index" label="序号" width="50"> </el-table-column>
                                <el-table-column prop="msTaskPackageId" v-if="false" label="主键" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="packageCode" label="工作包编号" width="150" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="packageName" label="工作包名称" width="150" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="productCode" label="机型" width="130" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="batchNo" label="批次" width="70" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="startPlaneNo" label="架次" width="70" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="state" label="配套状态" width="130" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="aState" label="缺件类型" width="130" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="sortingStatus" label="分拣状态" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="weekTime" label="周计划时间" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="dailyTime" label="日计划时间" width="130" :show-overflow-tooltip="true"> </el-table-column>
                            </el-table>
                            <!-- 分页 -->
                            <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page.currentPage"
                            :page-sizes="[10,20,50,100]"
                            :page-size="page.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total">
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </el-collapse-item>
            <el-collapse-item title="AO列表" name="AOList">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <!-- AO列表，AO号，机型，批次，架次，工作包编号，配套状态，分拣状态，缺件类型 -->
                            <el-table
                            ref="AOListTable"
                            size="mini"
                            :data="AOListTableData"
                            style="width: 100%"
                            height="350"
                            highlight-current-row
                            @current-change="tableCurrentChangeForAOList"
                            >
                                <el-table-column type="index" label="序号" width="50"> </el-table-column>
                                <el-table-column prop="msTaskAoId" v-if="false" label="主键" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="aoCode" label="AO号" width="130" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="productName" label="机型" width="130" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="batchNo" label="批次" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="startPlaneNo" label="架次" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="packageCode" label="工作包编号" width="150" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="state" label="配套状态" width="130" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="aState" label="缺件类型" width="130" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="sortingStatus" label="分拣状态" width="130" :show-overflow-tooltip="true"> </el-table-column>
                            </el-table>
                            <!-- 分页 -->
                            <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page2.pageNumbe"
                            :page-sizes="[10,20,50,100]"
                            :page-size="page2.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total2">
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </el-collapse-item>
        </el-collapse>
        <el-row>
            <TableTitle>
                <slot>
                    <p>
                    AO物料清单 / 配套物料清单
                    </p>
                </slot>
            </TableTitle>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <!-- AO物料清单列表：AO号，机型，批次，架次，工作包编号，数量，图号，装配图号 -->
                    <el-table
                    ref="multipleTable"
                    size="mini"
                    :data="AOMaterialTableData"
                    style="width: 100%"
                    height="250"
                    highlight-current-row
                    >
                        <el-table-column type="index" label="序号" width="50"> </el-table-column>
                        <el-table-column prop="msAoMatchBillId" v-if="false" label="主键" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="itemCode" label="图号" width="150" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="itemQty" label="数量" width="70" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="aoCode" label="AO号" width="130" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="productName" label="机型" width="130" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="batchNo" label="批次" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="startPlaneNo" label="架次" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="packageCode" label="工作包编号" width="150" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="repartAss" label="装配图号" width="150" :show-overflow-tooltip="true"> </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="18" style="padding-left: 10px;">
                <div class="grid-content bg-purple">
                    <!-- 配套物料清单列表:AO号，机型，批次，架次，工作包编号，需求数量，配套数量，分拣数量，图号，配套状态，分拣状态，缺件类型 -->
                    <el-table
                    ref="multipleTable"
                    size="mini"
                    :data="MatchMaterialTableData"
                    style="width: 100%"
                    height="250"
                    highlight-current-row
                    >
                        <el-table-column type="index" label="序号" width="50"> </el-table-column>
                        <el-table-column prop="msAoMatchInfoId" v-if="false" label="主键" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="aoCode" label="AO号" width="130" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="productName" label="机型" width="130" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="batchNo" label="批次" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="startPlaneNo" label="架次" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="packageCode" label="工作包编号" width="150" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="itemQty" label="需求数量" width="70" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="matchQty" label="配套数量" width="70" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="packageCount" label="分拣数量" width="70" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="itemCode" label="图号" width="150" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="state" label="配套状态" width="130" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="sortingStatus" label="分拣状态" width="130" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="aState" label="缺件类型" width="130" :show-overflow-tooltip="true"> </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
  import request from "@/utils/request.js";
  import TableTitle from "../../../../components/TableTitle.vue";
  export default {
    name: "wmsDeliveryTicketQuery",
    components:{
        TableTitle
    },
    data() {
      return {
        activeNames: ['queryBar','sortWorkpackageList','AOList'],
        formInline:{
            batchNo:"",
            startPlaneNo:"",
            aoCode:"",
            packageCode:"",
            itemCode:"",
            state:"",
            deliveryState:"",
            dailyStartTime:"",
            dailyEndTime:"",
            weekStartTime:"",
            weekEndTime:"",
            monthStartTime:"",
            monthEndTime:"",
            consoleIp:""  
        },
        sortDic:[{code:"0",name:"待分拣"},{code:"1",name:"已分拣"}],
        page:{
            total:1,
            pageSize:50,
            currentPage:1
        },
        page2:{
            total:1,
            pageSize:50,
            currentPage:1
        },
        sortingListTableData:[],
        workPackageTableData:[],
        AOListTableData:[],
        AOMaterialTableData:[],
        MatchMaterialTableData:[],
        sortingSelectedLength: null,
      };
    },
    methods:{
        handleChange(val) {
            console.log(val);
        },
        handleSelectionChangeForSortingList(val){
            this.sortingSelectedLength = val.length;
            if (val.length > 1) {
                this.$Alert({
                    title: "失败",
                    message: "请勾选一条分拣台数据！",
                    type: "error",
                });
                return;
            }
            console.log("val",val)
            this.formInline.consoleIp = val[0].consoleIp
        },
        tableCurrentChangeForSortingList(val) {
            var that = this;
            var consoleId = val.consoleId;
            request.post("/MsAoMachInfo/queryPackageByConsole",{"pageParameter":this.page,"searchParams":{"consoleId":consoleId}}).then((res)=>{
                console.log(res);
                that.workPackageTableData = res.data.retData;
                that.page.total = res.data.total;
            });
        },
        tableCurrentChangeForWorkPackageList(val){
            var that = this;
            var msTaskPackageId = val.msTaskPackageId;
            request.post("/MsAoMachInfo/queryAoByConsole",{"pageParameter":this.page2,"searchParams":{"msTaskPackageId":msTaskPackageId}}).then((res)=>{
                console.log(res);
                that.AOListTableData = res.data.retData;
                that.page.total = res.data.total;
            });
        },
        tableCurrentChangeForAOList(val){
            var that = this;
            // AO物料清单
            request.post("/MsAoMachInfo/queryMatchBillByConsole",val).then((res)=>{
                console.log(res);
                that.AOMaterialTableData = res.data.retData;
                that.page.total = res.data.total;
            });
            // 配套物料清单
            request.post("/MsAoMachInfo/queryMatchInfoByConsole",val).then((res)=>{
                console.log(res);
                that.MatchMaterialTableData = res.data.retData;
                that.page.total = res.data.total;
            });
        },
        handleSizeChange(val){
            this.page.pageSize = val;
        },
        handleCurrentChange(val){
            this.page.currentPage = val;
            this.$options.methods.doQuery.bind(this)();
        },
        handleCurrentChange2(val){
            this.page2.currentPage = val;
            this.$options.methods.doQuery.bind(this)();
        },
        doQuery(){  
            console.log(this.sortingSelectedLength)
            if (this.sortingSelectedLength > 1) {
                this.$Alert({
                    title: "失败",
                    message: "只能勾选一条分拣台数据！",
                    type: "error",
                });
                return;
            }
            var that = this;
            request.post("/MsAoMachInfo/queryPackageByConsole",{"pageParameter":this.page,"searchParams":this.formInline}).then((res)=>{
                console.log(res);
                that.workPackageTableData = res.data.retData;
                that.page.total = res.data.total;
            });
        },
        doReset(){
            Object.assign(this.formInline,this.$options.data().formInline);
        }
    },
    mounted(){
        request.post("/MsAoMachInfo/querySortConsole",{"pageParameter":this.page,"searchParams":{}}).then((res)=>{
            var that = this;
            console.log(res);
            that.sortingListTableData = res.data.retData;
            that.page.total = res.data.total;
        });
    }
  };
  </script>
  <style scoped>
  .input-width{
    width:120px;
  }
  </style>